/* ========================================================= */

.container {
  /* background-color: rgba(212, 212, 212, 0.352); */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto auto;

  justify-content: center;
  align-items: center;

  grid-template-areas:
    "e1 e1 e1"
    "e2 e2 e2"
    "e3 e4 e5"
    "e9 e9 e9 ";
}
.item1 {
  grid-area: e1;
  display: flex;
  height: auto;
  width: 100%;
  justify-self: center;
  justify-content: center;

  /* background-color: rgba(17, 255, 0, 0.2); */
}

.item2 {
  grid-area: e2;
  display: flex;
  justify-content: left;
  align-items: center;
  background-color: #0066cc;
}

.item3 {
  grid-area: e3;
  display: flex;
  justify-content: end;
  align-self: flex-start;
  margin-top: 2em;
  margin-left: 0.5em;
  /* background-color: rgba(0, 30, 255, 0.2); */
}

.item4 {
  grid-area: e4;
  display: flex;
  justify-content: center;
  align-self: flex-start;
  margin-top: 2em;
  padding-left: 5px;
  padding-right: 5px;

  /* border: 2px solid; border-color: blue; */
}
.item4 img {
  max-width: 80%;
  height: auto;
}

.item5 {
  grid-area: e5;
  display: flex;
  justify-content: left;
  align-self: flex-start;
  margin-top: 2em;
  margin-right: 0.5em;

  /* background-color: rgba(0, 255, 26, 0.508); */
}

.item9 {
  grid-area: e9;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  font-size: 1.1em;
  border-top: 2px solid black;
  margin-top: 5em;
  /* background-color: rgba(0, 30, 255, 0.508); */
}

/* ==================== Media ============================================ */

@media screen and (max-width: 700px) {
  .container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    justify-content: center;
    grid-template-areas:
      "e1"
      "e2"
      "e4"
      "e3"
      "e5"
      "e9";
  }
  .item1 {
    grid-area: e1;
    display: flex;
    height: auto;
    width: 100%;
  }
  .item2 {
    grid-area: e2;
    display: flex;
    width: 100%;
    justify-self: center;
    align-items: center;
    background-color: #0066cc;
  }
  .item3 {
    grid-area: e3;
    display: flex;
    justify-content: center;
    width: auto;
    padding: 0;
    margin: 0;
  }
  .item4 {
    grid-area: e4;
    display: flex;
    width: 55%;
    justify-self: center;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 0;
  }
  .item5 {
    grid-area: e5;
    display: flex;
    justify-content: center;
    width: auto;
    margin-top: 1em;
  }

  /* ============================================== */

  .item9 {
    grid-area: e9;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    border-top: 2px solid black;
  }

  .item9 p {
    font-size: 1.1em;
  }
}